<template>
    <el-row>
      <el-col :span="16">
        <el-row>
          <el-col :span="24">
            <p style="font-weight: bold; font-size: 20px;">友情链接</p>
            <el-row :gutter="20">
              <el-col :span="8">
                <a href="https://www.gzasc.edu.cn/SpotlightNews/info_itemid_26797.html" target="_blank"><img src="../../assets/imgs/lb2.jpg" alt="" style="width: 100%; height: 100%;"></a>
              </el-col>
              <el-col :span="8">
                <a href="https://www.gzasc.edu.cn/" target="_blank"><img src="https://www.gzasc.edu.cn/uploadfiles/2024/11/20241120222547701.jpg?5b6u5L+h5Zu+54mHXzIwMjQxMTIwMjIyNTA1LmpwZw==" alt="" style="width: 100%; height: 100%;"></a>
                <p>建“证”！广州应用科技学院科技园正式开工</p>
              </el-col>
              <el-col :span="8">
                <a href="https://www.gec-edu.org/?20-zh&bd=yqc&bd vid=7825189101196810853" target="_blank"><img src="../../assets/imgs/lb4.jpg" alt="" style="width: 100%; height: 100%;"></a>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8" style="padding-left: 15px;">
        <div id="chart" style="width: 100%; height: 215px; background-color: #101f56;"></div>
        <div id="chart2" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
        <div id="chart4" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
        <div id="salesTrendChart" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
        <div id="userDistributionChart" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
        <div id="incomeChart" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
      </el-col>
    </el-row>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import { mapGetters } from "vuex";
  
  export default {
    name: "Dashboard",
    computed: {
      ...mapGetters(["name"]),
    },
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        const chart = echarts.init(document.getElementById("chart"));
        const chart2 = echarts.init(document.getElementById("chart2"));
        const chart4 = echarts.init(document.getElementById("chart4"));
        const salesTrendChart = echarts.init(document.getElementById("salesTrendChart"));
        const userDistributionChart = echarts.init(document.getElementById("userDistributionChart"));
        const incomeChart = echarts.init(document.getElementById("incomeChart"));
  
        // 主图：销量柱状图
        const option = {
          textStyle: {
            color: '#ffffff',
          },
          color: ['rgb(250,200,88)', 'rgb(250,200,88)'],
          grid: {
            left: "5%",
            right: "5%",
            bottom: "10%",
            containLabel: true,
          },
          title: {
            text: "销量数据",
            left: "center",
            textStyle: {
              color: '#66DD66',
            }
          },
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              return (
                "产品：" + params[0].name +
                "<br/>销量：" + params[0].data
              );
            },
          },
          legend: {
            data: ["销量"],
            left: "right",
            textStyle: {
              color: '#ffffff',
            }
          },
          xAxis: {
            type: "category",
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子"],
          },
          yAxis: {
            type: "value",
            name: "销量",
            min: 0,
          },
          series: [{
            name: "销量",
            type: "bar",
            data: [5, 2, 3, 4],
            barWidth: "30",
          }],
        };
  
        // 饼图2：营业收入季度分布图
        const option2 = {
          title: {
            left: "center",
            text: "营业总收入季度分布图",
            textStyle: {
              color: "#6d6",
            },
          },
          tooltip: {},
          legend: {
            textStyle: {
              color: '#ffffff',
            },
            left: "right",
            top: "10",
            orient: "vertical",
            data: ["一季度", "二季度", "三季度", "四季度"],
          },
          dataset: {
            source: [
              ["quarter", "一季度", "二季度", "三季度", "四季度"],
              ["完美世界", 25.74, 25.7, 29.18, 21.58],
              ["中国神华", 510.8, 539.2, 611, 672],
            ],
          },
          series: [
            {
              name: "完美世界",
              type: "pie",
              center: ["25%", "50%"],
              radius: "40%",
              seriesLayoutBy: "row",
              encode: {
                itemName: 0,
                value: 1,
              },
              label: {
                show: false,
              },
            },
            {
              name: "中国神华",
              type: "pie",
              center: ["75%", "50%"],
              radius: "40%",
              seriesLayoutBy: "row",
              encode: {
                itemName: 0,
                value: 2,
              },
              label: {
                show: false,
              },
            },
          ],
        };
  
        // 折线图：用户激活数据
        const option4 = {
          textStyle: {
            color: '#ffffff',
          },
          title: {
            text: "用户激活数据",
            subtext: "Demo 虚构数据",
            x: "center",
            textStyle: {
              color: '#66DD66'
            }
          },
          legend: {
            orient: "horizontal",
            x: "left",
            y: "top",
            data: ["猜想", "预期", "实际"],
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "10%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: {
            name: "月份",
            type: "category",
            data: [
              "1月", "2月", "3月", "4月", "5月", 
              "6月", "7月", "8月", "9月", "10月", 
              "11月", "12月",
            ],
          },
          yAxis: {
            name: "人次",
            type: "value",
            min: 0,
            max: 4000,
            splitNumber: 7,
          },
          series: [
            {
              name: "猜想",
              data: [
                454, 226, 891, 978, 901, 581, 400, 543, 272, 955, 1294, 1581,
              ],
              type: "line",
            },
            {
              name: "预期",
              data: [
                2455, 2534, 2360, 2301, 2861, 2181, 1944, 2197, 1745, 1810, 
                2283, 2298,
              ],
              type: "line",
            },
            {
              name: "实际",
              data: [
                1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 
                3170, 3665,
              ],
              type: "line",
            },
          ],
          color: ["#3366CC", "#FFCC99", "#99CC33"],
        };
  
        // 新增：销售趋势折线图
        const salesTrendOption = {
          textStyle: {
            color: '#ffffff',
          },
          title: {
            text: "产品销售趋势",
            x: "center",
            textStyle: {
              color: '#66DD66'
            }
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["产品A", "产品B", "产品C"],
            textStyle: {
              color: '#ffffff',
            },
            left: "right",
          },
          xAxis: {
            type: "category",
            data: ["一月", "二月", "三月", "四月", "五月", "六月"],
          },
          yAxis: {
            type: "value",
            name: "销量",
          },
          series: [
            {
              name: "产品A",
              type: "line",
              data: [120, 200, 150, 80, 70, 110],
              smooth: true,
            },
            {
              name: "产品B",
              type: "line",
              data: [90, 100, 80, 90, 70, 120],
              smooth: true,
            },
            {
              name: "产品C",
              type: "line",
              data: [60, 80, 100, 70, 90, 80],
              smooth: true,
            }
          ],
        };
  
        // 新增：用户分布饼图
        const userDistributionOption = {
          title: {
            text: "用户地区分布",
            subtext: "Demo 虚构数据",
            x: "center",
            textStyle: {
              color: '#66DD66'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
              color: '#ffffff',
            },
          },
          series: [
            {
              name: '地区',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 335, name: '地区A' },
                { value: 310, name: '地区B' },
                { value: 234, name: '地区C' },
                { value: 135, name: '地区D' },
                { value: 1548, name: '地区E' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              color: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"],
            }
          ],
        };
  
        // 新增：收入柱状图
        const incomeOption = {
          title: {
            text: "产品收入对比",
            left: "center",
            textStyle: {
              color: '#66DD66',
            }
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['产品X', '产品Y', '产品Z'],
            textStyle: {
              color: '#ffffff',
            },
            left: 'right',
          },
          grid: {
            left: "5%",
            right: "5%",
            bottom: "10%",
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月']
          },
          yAxis: {
            type: 'value',
            name: '收入(万元)',
          },
          series: [
            {
              name: '产品X',
              type: 'bar',
              data: [120, 132, 101, 134, 90, 230],
              barWidth: '20%',
            },
            {
              name: '产品Y',
              type: 'bar',
              data: [220, 182, 191, 234, 290, 330],
              barWidth: '20%',
            },
            {
              name: '产品Z',
              type: 'bar',
              data: [150, 232, 201, 154, 190, 330],
              barWidth: '20%',
            }
          ],
        };
  
        // 设置各个图
              // 设置各个图表的选项并渲染  
        chart.setOption(option);  
        chart2.setOption(option2);  
        chart4.setOption(option4);  
        salesTrendChart.setOption(salesTrendOption);  
        userDistributionChart.setOption(userDistributionOption);  
        incomeChart.setOption(incomeOption);  
      },  
    }  
  };  
  </script>  
  
  <style scoped>  
  /* 可以在这里添加样式 */  
  </style>